<template>
	<el-dialog title="音乐素材" :visible="pickBgm.status" width="800px" :before-close="handleCancel" custom-class="bgm-dialog"
	 class="left-tab-dialog">
		<p v-if="this.message" class="no-music-tip">{{this.message}}</p>
		<el-tabs tab-position="left" v-model="activeName" style="min-height: 200px;" @tab-click="handleClick">
			<p v-show="curPickBgm.src" class="bgm-active">已选择：{{ curPickBgm.name }}</p>
			<el-tab-pane label="音乐库" name="public">
				<div v-if="publicBGMs.length>0">
					<bgm-lists :lists="publicBGMs" @pick="pick" @play="handlePlay" v-if="activeName=='public'" :active="curPickBgm" />
					<el-pagination layout="prev, pager, next" :total="total" @current-change="pageChange"></el-pagination>
				</div>
				<div class="nophoto" v-else>
					<img src="../../assets/noPhoto.png" alt="">
					<p>暂无音乐</p>
				</div>
			</el-tab-pane>
			<el-tab-pane label="我的音乐" name="user">
				<div v-if="userBgmLists.length>0">
					<bgm-lists :lists="userBgmLists" @pick="pick" @play="handlePlay" v-if="activeName=='user'" :active="curPickBgm" />
					<el-pagination layout="prev, pager, next" :total="total" @current-change="pageChange"></el-pagination>
				</div>
				<div class="nophoto" v-else>
					<img src="../../assets/noPhoto.png" alt="">
					<p>暂无音乐</p>
				</div>
			</el-tab-pane>
		</el-tabs>

		<audio ref="music" preload="auto" loop></audio>
		<!-- 上传音乐 -->
		<el-upload ref='upload' class="upload-demo" drag action="http://192.168.1.40:8088/api/MusicAPI/UploadMusic" multiple
		 :data="post_data" :show-file-list="show_file_list" :on-success="success_callback">
			<el-button round><i class="iconfont icon-update"></i>上传音乐</el-button>
			<el-tooltip class="item" effect="dark" content="只能上传mp3/mp4/m4a文件，且大小不超过4M" placement="right">
				<i class="iconfont icon-remind"></i>
			</el-tooltip>
		</el-upload>
		<!-- 音乐上传完成 -->
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="handleCancel">取 消</el-button>
			<el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import lists from './lists.vue'

	export default {
		name: 'PickBgMusic',
		data() {
			return {
				isPlay: false,
				activeName: 'public',
				curPickBgm: {
					name: '',
					src: ''
				},
				userBgmLists: [],
				publicBGMs: [],
				total: 0,
				message: "",
				show_file_list: false
			}
		},
		computed: {
			pickBgm() {
				return this.$store.getters.pickBgm
			},
			post_data() {
				return {
					isEffect: this.pickBgm.isEffect
				}
			}
		},
		methods: {
			// tab的切换
			handleClick() {
				const activeName = this.activeName
				if (activeName === 'user') {
					this.getMusics(1, false)
				}
			},
			// 播放音乐
			handlePlay(bgm) {
				const music = this.$refs.music
				if (this.isPlay && (music.src === bgm.MusicUrl)) {
					this.isPlay = false
					music.pause()
				} else {
					this.isPlay = true
					music.src = bgm.MusicUrl
					music.play()
				}
			},
			pick(bgm) {
				this.curPickBgm.src = bgm.MusicUrl
				this.curPickBgm.name = bgm.MusicName
			},
			// 取消
			handleCancel() {
				if (this.isPlay) {
					this.$refs.music.pause()
				}
				this.message = ""
				this.$store.commit('SET_PICK_BGM', false)
			},
			// 选择确认
			handleConfirm() {
				if (this.curPickBgm.src) {
					this.pickBgm && this.pickBgm.callback && this.pickBgm.callback(this.curPickBgm)
					this.handleCancel()
				} else {
					this.message = "请选择音乐！"
				}

			},
			// 获取音乐列表
			getMusics(pageIndex, isSystem) {
				const isEffect = this.$store.getters.pickBgm.isEffect
				this.$request.get_musics({
					data: {
						isMusicEffect: isEffect,
						isSystem: isSystem,
						page: pageIndex
					},
					success: (result) => {
						this.total = result.data.total
						if (isSystem) {
							this.publicBGMs = result.data.musicList
						} else {
							this.userBgmLists = result.data.musicList
						}
					}
				})
			},
			// 上传成功之后的回调
			success_callback(response, file, file_list) {
				// 上传成功的响应
				if (response.success) {
					this.$refs.upload.clearFiles()
					if (file.status=='success') {
						this.activeName = "user"
						this.getMusics(1, false)
						this.message = ""
					}
				} else {
					this.message = response.message
				}
			},
			pageChange(pageIndex) {
				var isSystem = this.activeName === 'user' ? false : true
				this.getMusics(pageIndex, isSystem)
			}

		},
		mounted() {
			//this.getMusics(1, true)
			this.publicBGMs=[{
				'ID':1,
				'MusicName':'http://res1.eqh5.com/store/fcbdfaa6d9348f4441eec0ff92552326.mp3'
			},{
				'ID':2,
				'MusicName':  'http://res1.eqh5.com/store/19/f0729d7be3da923eb7f1a8874ac038eb.mp3'
			},
			{
				'ID':3,
				'MusicName':  'http://res1.eqh5.com/store/34d7431f3f1584bae506a7d0b342bf32.mp3'
			},
			{
				'ID':4,
				'MusicName':  'http://res1.eqh5.com/store/19/f0729d7be3da923eb7f1a8874ac038eb.mp3'
			},
			{
				'ID':5,
				'MusicName':  'http://res1.eqh5.com/store/ab7fc0401c1d9e317f0aeda3600b5030.mp3'
			},
			{
				'ID':6,
				'MusicName':  'http://res1.eqh5.com/store/e94c1cead55743dfc37af74a384dc9c3.mp3'
			}]
		},
		components: {
			bgmLists: lists
		}
	}
</script>
<style lang="scss">
	.bgm-dialog {
		.bgm-active {
			margin-bottom: 15px;
			text-align: right;
			font-size: 12px;
		}
	}
</style>
